<style scoped>
.wxchat-container {
  width: 100%;
  z-index: 100;
  left: 0;
  top: 0;
  overflow: hidden;
}
.shadow {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.2;
}
.window {
  box-shadow: 1px 1px 20px -5px #000;
  width: 100%;
  background: #f5f5f5;
  margin: 0 auto;
  overflow: hidden;
  padding: 0;
  height: 100%;
  position: relative;
  z-index: 101;
}
button {
  border: 0;
  background: none;
  border-radius: 0;
  text-align: center;
}
button {
  outline: none;
}
.w100 {
  width: 100%;
}
.mt5 {
  margin-top: 5px;
}
.mt10 {
  margin-top: 10px;
}
.mt20 {
  margin-top: 20px;
}
.mb10 {
  margin-bottom: 10px;
}
.mb20 {
  margin-bottom: 20px;
}
.fs0 {
  font-size: 0;
}
.title {
  background: #000;
  text-align: center;
  color: #fff;
  width: 100%;
  height: 50px;
  line-height: 50px;
  font-size: 14px;
}
.loading,
.no-more {
  text-align: center;
  color: #b0b0b0;
  line-height: 100px;
}
.no-more {
  line-height: 60px;
}
.pull-right {
  float: right;
}
.link-line {
  text-decoration: underline;
}
.message {
  padding: 10px 15px;
  /* padding-bottom: 50px; */

  background-color: #f5f5f5;
}
.message li {
  margin-bottom: 15px;
  left: 0;
  position: relative;
  display: block;
}
.message .time {
  margin: 10px 0;
  text-align: center;
}
.message .text {
  display: inline-block;
  position: relative;
  padding: 0 10px;
  max-width: calc(100% - 75px - 35px);
  line-height: 1.71;
  font-size: 14px;
  padding: 5px 10px 5px;
  text-align: left;
  word-break: break-all;
  background-color: #fff;
  color: #000;
  border-radius: 4px;
  box-shadow: 0px 1px 7px -5px #000;
  min-height: 33px;
  -webkit-user-select:text; /*webkit浏览器*/
  -khtml-user-select:text; /*早期浏览器*/
  -moz-user-select:text;/*火狐*/
  -ms-user-select:text; /*IE10*/
  user-select:text;
}
.message .text:before {
  content: " ";
  position: absolute;
  top: 9px;
  right: 100%;
  border: 6px solid transparent;
  border-right-color: #fff;
}
.message .tree {
  background: #e6e6e6;
}
.message .tree:before {
  border-right-color: #e6e6e6;
}
.message .tree .listCon {
  background: #fff;
  border: 1px solid #ccc;
  border-top: 0px;
  margin-top: 8px;
  padding-top: 0;
  line-height: 20px;
  overflow: hidden;
}
.message .tree .listCon .item {
  border-top: 1px solid #ccc;
  overflow: hidden;
  padding: 5px 8px 6px;
  color: #3385ff;
}
.message .avatar {
  float: left;
  margin: 0 10px 0 0;
  border-radius: 3px;
}
.message .sendUser {
  margin-bottom: 4px;
}
.message .sendUserName {
  color: #777;
  position: relative;
  top: -2px;
}
.message .self .sendUserName {

}
.message .time > span {
  display: inline-block;
  padding: 2px 14px;
  font-size: 10px;
  color: #fff;
  border-radius: 8px;
  background-color: #dadada;
}
.message .system > span {
  padding: 4px 9px;
  text-align: left;
}
.message .goods {
  min-width: 60%;
  max-width: 300px;
  cursor: pointer;
}
.message .goods .left {
  float: left;
  width: calc(100% - 62px - 10px);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.message .goods .right {
  float: right;
  display: block;
  width: 60px;
  height: 60px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
.message .self {
  text-align: right;
}
.message .self .avatar {
  float: right;
  margin: 0 0 0 10px;
}

.message .self .text {
  background-color: #9eea6a;
}

.message .self .text:before {
  right: inherit;
  left: 100%;
  border-right-color: transparent;
  border-left-color: #9eea6a;
}
.message .text-image {
  padding: 0;
  line-height: 0;
  border-radius: 5px;
}
.message .self .text-image::before {
  border-left-color: #fff;
}
.message .text-image img {
  border-radius: 5px;
  cursor:zoom-in;
}

.message .self .goods:before {
  border-left-color: #fff !important;
}
.message .image {
  max-width: 200px;
}
.message .laodingimage {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(5, 5, 5, 0.7);
  color: #fff;
  font-size: 18px;
  text-align: center;
}
.message .laodingimage .laodingimagetext {
  position: absolute;
  top: calc(50% - 15px);
  width: 100%;
  left: 0;
}
img.static-emotion-gif,
img.static-emotion {
  vertical-align: middle !important;
}

.an-move-left {
  left: 0;
  animation: moveLeft 0.7s ease;
  -webkit-animation: moveLeft 0.7s ease;
}
.an-move-right {
  left: 0;
  animation: moveRight 0.7s ease;
  -webkit-animation: moveRight 0.7s ease;
}
.bgnone {
  background: none;
}
@keyframes moveRight {
  0% {
    left: -20px;
    opacity: 0;
  }
  100% {
    left: 0;
    opacity: 1;
  }
}

@-webkit-keyframes moveRight {
  0% {
    left: -20px;
    opacity: 0;
  }
  100% {
    left: 0px;
    opacity: 1;
  }
}
@keyframes moveLeft {
  0% {
    left: 20px;
    opacity: 0;
  }
  100% {
    left: 0px;
    opacity: 1;
  }
}

@-webkit-keyframes moveLeft {
  0% {
    left: 20px;
    opacity: 0;
  }
  100% {
    left: 0px;
    opacity: 1;
  }
}

@media (max-width: 367px) {
  .fzDInfo {
    width: 82%;
  }
}

.event{
	width: 100%;
	text-align: center;
}
.event > .eventText{
	display: inline-block;
	padding: 2px 28px;
	font-size: 10px;
	color: #fff;
	/* border-radius: 8px; */
	background-color: #c7c6c6;
	
}
.tag{
	width: 100%;
	text-align: center;
}
.tag > .tagText{
	display: inline-block;
	padding: 2px 28px;
	font-size: 12px;
	color: #fff;
	border-radius: 20px;
	background-color: #f56c6c;
	margin: 5px;
}
</style>

<template>
    <div class="wxchat-container" @contextmenu.prevent>
        <div class="window" id="window-view-container">
           
                <div class="message">
                    <ul v-if="data" style="padding:0;">
                        <li v-for="(message,index) in data" :key="index + '' + message.type" :class="message.type=='receive'?'an-move-right':'an-move-left'">
							
							<div class="event" v-if="message.msgType == 'event'">

								<div class="eventText">
									<span  v-if="new Date().getDate() == new Date(message.sendTime).getDate()"> <span>{{parseInt(message.sendTime) | formatterDate("今天 HH:mm:ss")}}</span> </span>
									<span  v-else> <span>{{parseInt(message.sendTime) | formatterDate("yyyy-MM-dd HH:mm:ss")}}</span> </span>
									<span style="margin-left:10px;">{{message.content}}</span>
								</div>
				
							</div>

							<div v-else>
								<div v-if="isShowTime(index)">
									<p class="time" v-if="new Date().getDate() == new Date(message.sendTime).getDate()"> <span>{{parseInt(message.sendTime) | formatterDate("今天 HH:mm:ss")}}</span> </p>

									<p class="time" v-else> <span>{{parseInt(message.sendTime) | formatterDate("yyyy-MM-dd HH:mm:ss")}}</span> </p>
								</div>
			
								
								<div :class="'main' + (message.type=='receive'?' self':'')">
									
									<div class="sendUser">
										<img v-if="message.sendUserAvatar" class="avatar" width="35" height="35" alt="" :src="message.sendUserAvatar">
										<img v-else class="avatar" width="35" height="35" alt="" src="../../assets/images/avatar.png">

										<span class="sendUserName">{{message.sendUserName}}</span>
									</div>
										

									<!-- 送达 -->
									<!-- <span v-if="message.direction == 2 && message.succeed" style="font-size:10px;color:#bbb;position:relative;top:10px;">送达</span> -->
									<!-- 未送达 -->
									<!-- <span v-if="message.direction == 2 && !message.succeed" style="font-size:10px;color:#bbb;position:relative;top:10px;"><van-loading style="display:inline-block"  type="spinner" size="10px" color="black" /></span> -->
					

										<!-- 文本 -->
										<div @contextmenu.prevent.stop="openMenu($event,message)" class="text" v-if="message.msgType=='text'" v-html="$options.filters.emoji(message.content)"></div>
										<!-- 图片 -->
										<div class="text text-image" v-else-if="message.msgType=='image'">
											<img @contextmenu.prevent.stop="openMenuImg($event,message,index)" @click="clickImg(index)" @load="imgLoad()" :src="message.imgUrl" class="image" alt="聊天图片">
										</div>
										<!-- 加载中的图片 -->
										<div class="text text-image" v-else-if="message.msgType=='laodingimage'">
											<div class="laodingimage">
												<span class="laodingimagetext">图片发送中...</span>
											</div>
											<img  @load="imgLoad()" :imgId="message.imgId" :src="message.imgUrl" class="image" alt="[图片加载失败]">
										</div>

										<!-- 图文链接 -->
										<div  @contextmenu.prevent.stop="openMenuTag($event,message)" class="text goods" style="background:#fff;border:1px solid #eee;" v-else-if="message.msgType=='card'" @click="linkCard(message.forwardUrl)">
											<div>{{message.description}}</div>
											<div style="overflow: hidden;margin-bottom:5px;">
												<div class="left" style="font-size:12px;color:#999;">{{message.content}}</div>
												<img class="right"  :src="message.imgUrl" alt="">
											</div>
										</div>

										<!-- 自动回复的列表 -->
										<div   @contextmenu.prevent.stop="openMenuTag($event,message)" class="text tree" v-else-if="message.msgType=='tree'">
											<div class="treeTitle">您是想问以下问题吗？可以点击哦。如果不是，请直接在输入框提问。</div>
											<div class="listCon">
												<div class="item" v-for="(item,index) in message.content" :key="'tree' + index">
													<div class="itemText">{{item.title}}</div>
												</div>
											</div>
										</div>
								</div>
							</div>
                            
							<div class="tag">
								<div v-for="tag in message.tags" :key="tag.id" class="tagText">
									<span  v-if="new Date().getDate() == new Date(tag.crtTime).getDate()"> <span>{{parseInt(tag.crtTime) | formatterDate("今天 HH:mm:ss")}}</span> </span>
									<span  v-else> <span>{{parseInt(tag.crtTime) | formatterDate("yyyy-MM-dd HH:mm:ss")}}</span> </span>
									<span style="margin-left:10px;">{{tag.tagName}}</span>
								</div>
							</div>
     
                        </li>
                        
                    </ul>
                </div>



        </div>

    </div>
</template>

<script>
export default {
  name: "wxChat",

  components: {},

  props: {
    data: {
      type: Array,
      required: true
    },
    hiddenTime: {
      type: Boolean,
      required: false
    }
  },

  data() {
    return {
      isUpperLaoding: false,
      isUnderLaoding: false,

      isRefreshedAll: false,
      isLoadedAll: false,

      minHeight: 700,
      dataArray: []
    };
  },

  created() {
    this.initData();
  },
  mounted() {
    //document.getElementsByTagName('body')[0].scrollTop=0;
    this.minHeight = document.getElementById(
      "window-view-container"
    ).offsetHeight;
    // this.maxHeight = document.getElementById('window-view-container').offsetHeight;
  },

  methods: {
    openMenuTag(e,data){
      let that = this
      let biaoqian = this.$route.name == "service"?'打标签':''

      	this.$openMenu(e,{
			  array:[
					{
						text: biaoqian
					},
			  ],
			  click(item,index){
					if(index == 0){
						that.$emit("openMessageTag",data);
					}
			  }
		  })
    },
    openMenu(e,data){
		let that = this

		let seleText = window.getSelection().toString()
		let color =  window.getSelection().toString()?'':'#888'

		let biaoqian = this.$route.name == "service"?'打标签':''

      	this.$openMenu(e,{
			  array:[
					{
						text: `复制选中文字(${seleText})`,
						color:color
					},
					{
						text: `复制整条信息`
					},
					{
						text: biaoqian
					},
			  ],
			  click(item,index){
					if(index == 0){
						// 复制选中
						that.$copy(seleText,()=>{
							that.$message({
								message: '复制成功',
								type: 'success'
							});
						})
					}else if(index == 1){
						//   复制整条
						that.$copy(data.content,()=>{
							that.$message({
								message: '复制成功',
								type: 'success'
							});
						})
					}else if(index == 2){
						that.$emit("openMessageTag",data);
					}
			  }
		  })
	},
	openMenuImg(e,data,imgIndex){
		let that = this

		// let seleText = window.getSelection().toString()
		// let color =  window.getSelection().toString()?'':'#888'

		let biaoqian = this.$route.name == "service"?'打标签':''

      	this.$openMenu(e,{
			  array:[
					{
						text: `放大`,
					},
					{
						text: `新页面打开图片`
					},
					{
						text: biaoqian
					},
			  ],
			  click(item,index){
					if(index == 0){
						// 放大
						that.clickImg(imgIndex)
					}else if(index == 1){
						// console.log(window.open)
						window.open(data.imgUrl)
					}else if(index == 2){
						that.$emit("openMessageTag",data);
					}
			  }
		  })
	},
    isShowTime(index) {
      // 判断是否显示time
      if (!this.hiddenTime) {
        return true;
      }
      // 第一条必定显示
      if (index == 0) {
        return true;
      } else {
        // 第二条判断3分钟
        let time = this.data[index].sendTime - this.data[index - 1].sendTime;
        // 三分钟
        let dTime = 1000 * 60 * 3;

        if (time >= dTime) {
          return true;
        } else {
          return false;
        }
      }
    },
    clickImg(e) {
      let arr = []
      let j = 0
      for(let i = 0;i < this.data.length;i ++){
        if(this.data[i].msgType == 'image'){
            arr.push(this.data[i].imgUrl)
            if(i <= e){
                j ++
            }
        }
      }
      let obj = {
        list:arr,
        index:j - 1
      }
      this.$previewImg(obj)
    },
    link(url) {
      if (url) {
        window.location.href = url;
      }
    },
    linkCard(url) {
      if (url) {
        if (url.substr(0, 4) == "http") {
          window.open(url);
        }
      }
    },
    imgLoad() {
      this.$emit("imgLoad");
    },
    initData() {
      this.dataArray = this.dataArray.concat(this.data);
    }
  }
};
</script>